<script setup lang='ts'>
import { ref, onMounted, onUnmounted, reactive, watch } from 'vue'
import * as echarts from 'echarts'

const chartDom = ref(null)
let myChart:echarts.ECharts|null = null 

const option:echarts.EChartsOption = {
  series: [
    {
      type: 'gauge',
      center: ['50%', '60%'],
      startAngle: 200,
      endAngle: -20,
      min: 0,
      max: 2000,
      splitNumber: -15,
      itemStyle: {
        color: '#FFAB91'
      },
      progress: {
        show: true,
        width: 30
      },

      pointer: {
        show: false
      },
      axisLine: {
        lineStyle: {
          width: 30
        }
      },
      axisTick: {
        distance: -45,
        splitNumber: 5,
        lineStyle: {
          width: 2,
          color: '#999'
        }
      },
      splitLine: {
        distance: -52,
        length: 14,
        lineStyle: {
          width: 3,
          color: '#999'
        }
      },
      axisLabel: {
        distance: -20,
        color: '#999',
        fontSize: 20
      },
      anchor: {
        show: false
      },
      title: {
        show: false
      },
      detail: {
        valueAnimation: true,
        width: '60%',
        lineHeight: 40,
        borderRadius: 8,
        offsetCenter: [0, '-15%'],
        fontSize: 20,
        fontWeight: 'bolder',
        formatter: '{value}',
        color: 'inherit'
      },
      data: [
        {
          value: 1376.65
        }
      ]
    }
  ]

}

onMounted(()=>{
    if(chartDom.value){
        myChart = echarts.init(chartDom.value)
        myChart.setOption(option)
    }
})

onUnmounted(()=>{
    myChart?.dispose()
})
</script>
<template>

<div ref="chartDom" class="w-full h-60"></div>
</template>
<style scoped>
</style>